<template>
<div class="home-main">
    <div id="r-biao2" style="width:100%;height:90%;"></div>
</div>

</template>

<script>
import echarts from 'echarts'
import ReviewApi from '@/api/check/voReview.js'
export default {
  name: '',
  data () {
    return {
      // 页面查询数据
      data: [],
      areaData: [],
      queryData: {
        selectArea: 0,
        date: []
      },
      myChart: null,
      option: {

      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.hadleGetFilesListApi()
    })
  },
  methods: {
    async  hadleGetFilesListApi () {
      let data = (await ReviewApi.getRote()).data
      let x = []
      data.forEach(element => {
        x.push({
          value: element.score,
          name: element.areaName
        })
      })
      console.log('x', x)
      const option = {
        title: {
          text: '数据分析',
          textStyle: {
            color: '#000000',
            fontSize: 20
          },
          x: 'left'
          // y:'top'
        },

        grid: {

          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        // legend: {
        // 	// orient: 'vertical',
        // 	// top: 'middle',
        // 	bottom: 10,
        // 	left: 'center',
        // 	data: label
        // },
        // color: [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
        series: [{
          type: 'pie',
          name: '占比',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          selectedMode: 'single',
          labelLine: {
						                normal: {
						                    length: 20
						                }
						            },
          label: {
            normal: {
              // formatter: '{b}:{c}: ({d}%)',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 15
              }
            }
          },
          data: x,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      let myChart = this.$echarts.init(document.getElementById('r-biao2'))
      myChart.setOption(option)
      window.addEventListener('resize', function () {
				    myChart.resize()
      })
    }
  },
  watch: {

  }
}
</script>
<style>
	.home-main {
    min-width: 1300px;
    min-height: 500px;
    width: 100%;
    height: 100%;
    /* background-image: url(/img/ksh.b9d92e66.png); */
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>
